<template>
  <div class="warn-current pager-container">
    <!--查询条件-->
    <div class="pager-container-inner">
      <!--顶部操作-->
      <div class="top-btn-wrap">
        <el-button type="primary">批量确认</el-button>
        <div class="op-item flex">
          <el-switch v-model="freshCtrl"></el-switch>
          <span class="text">自动刷新</span>
        </div>
        <div class="op-item flex">
          <el-icon :size="18">
            <SvgIcon name="voice-on"></SvgIcon>
          </el-icon>
          <span class="text">静音</span>
        </div>
      </div>
      <!--表单查询项-->
      <bs-form form-type="query" :model="queryForm">
        <bs-form-item label="主机">
          <bs-select v-model="queryForm.a">
          </bs-select>
        </bs-form-item>
        <bs-form-item label="级别">
          <bs-select v-model="queryForm.a">
          </bs-select>
        </bs-form-item>
        <bs-form-item label="告警信息">
          <bs-select v-model="queryForm.a">
          </bs-select>
        </bs-form-item>
        <bs-form-item class="max-form-item" label="最后一次告警时间" label-width="130px">
          <div class="content-item-wrap">
            <el-checkbox class="in-item"></el-checkbox>
            <el-date-picker type="daterange" v-model="queryForm.b"></el-date-picker>
          </div>
          <div class="content-item-wrap">
            <el-checkbox class="in-item">最近</el-checkbox>
            <el-input-number class="in-item" v-model="queryForm.c"></el-input-number>
            <el-select style="width: 100px;" v-model="queryForm.b"></el-select>
          </div>
        </bs-form-item>
        <bs-form-item class="form-item-btns">
          <el-button type="primary" @click="handleSearch()">查询</el-button>
          <el-button>重置</el-button>
        </bs-form-item>
      </bs-form>
      <!--表格-->
      <div class="table-content">
        <bs-table ref="tableRef" :get-data="getList" :columns="columns" :data="tableData"></bs-table>
      </div>
    </div>
  </div>
  <ConfirmDialog ref="confirmRef"></ConfirmDialog>
  <MaskDialog ref="maskRef"></MaskDialog>

</template>
<script setup lang="ts">
import {reactive, ref, h, onMounted} from 'vue'
import BsTable from '@/components/table/BsTable.vue'
import ConfirmDialog from './components/current/ConfirmDialog.vue'
import MaskDialog from './components/current/MaskDialog.vue'
import * as API from '@/service/modules/warn'
import {ElTag} from 'element-plus'

const freshCtrl = ref(false)
const maskRef = ref()
const confirmRef = ref()
const tableRef = ref()
const tableData = ref<any[]>([])
const queryForm = reactive<Record<string, any>>({
})

const columns:ColumnItem[] = [
  {
    type: 'selection',
    prop: 'selection',
    fixed: 'left',
    width: 30
  },
  {
    type: 'expand',
    prop: 'expand',
    fixed: 'left',
    width: 20,
    renderExpand: (row) => {
      return h('pre', {style: 'line-height: 1.5'}, row.message)
    }
  },
  {
    label: '级别',
    prop: 'level',
    width: 80,
    bodyOptions: {
      type: 'custom',
      bind (row) {
        let type:any = 'primary'
        let text = '通知'
        if (row.level === 'error') {
          type = 'danger'
          text = '严重'
        }
        if (row.level === 'warning') {
          type = 'warning'
          text = '警告'
        }
        return h(ElTag, {type: type}, () => text)
      }
    }
  },
  {
    label: '主机',
    prop: 'hostip',
    width: 180
  },
  {
    label: '告警信息',
    prop: 'name',
    minWidth: 180
  },
  {
    label: '最后一次告警时间',
    prop: 'event_time',
    width: 180
  },
  {
    label: '次数',
    prop: '1',
    width: 60
  },
  {
    label: '状态',
    prop: 'status',
    width: 80
  },
  {
    label: '操作',
    prop: '',
    fixed: 'right',
    width: 180,
    bodyOptions: {
      type: 'button',
      bind (row, _index) {
        return {
          buttons: [{
            text: '登录',
            onClick: () => {
            }
          }, {
            text: '屏蔽',
            onClick: () => {
              maskRef.value.open(row)
            }
          }, {
            text: '确认',
            onClick: () => {
              confirmRef.value.open(row)
            }
          }]
        }
      }
    }
  }
]

const getList = async (tableParams:TableDataParam) => {
  const params = {
    page: tableParams.currentPage,
    page_size: tableParams.pageSize,
    query: JSON.stringify({
      status: 'ALERT',
      confirm_status: false
    })
  }
  const res:any = await API.getWarnList(params)
  tableData.value = res.results
  return {
    total: res.count
  }
}

const handleSearch = () => {
  tableRef.value.queryData()
}

onMounted(() => {
  handleSearch()
})
</script>
<style lang="scss" scoped>
@import "./scss/list.scss";
.content-item-wrap {
  margin-right: 12px;
  .in-item {
    margin-right: 8px;
  }
}
</style>
